<!DOCTYPE HTML>
<html th:with="title='编辑设备',module='/js/app/common/uploadaudio.js'">
<head th:include="fragments/header :: header">
</head>
<body id="app">
	<div class="page-container">
		<form action="/manager/device/update" method="post" class="form form-horizontal" id="device-form">
			<input type="hidden" name="id" v-model="data.id" />
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备名称：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="data.deviceName" id="deviceName" name="deviceName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					云科号：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="data.yunkeNum" id="yunkeNum" name="yunkeNum">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					mac地址：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="data.sn" id="sn" name="sn">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">设备地址：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="data.address" id="address" name="address">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">联系电话：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" v-model="data.mobile" id="mobile" name="mobile">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备状态：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<span class="select-box">
						<select class="select size-L" id="showType" name="showType" v-model="data.showType" onchange="showAppTemplate();">
							<option value="0">横屏</option>
							<option value="1">竖屏</option>
						</select>
					</span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">分辨率：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="resolution" name="resolution" v-model="data.resolution">
				</div>
			</div>
			<input type="hidden" id="operator" name="operator" v-model="data.user.id">
			<div class="row cl" sec:authorize="hasRole('ROLE_DEVICE_JOINUSER')">
				<label class="form-label col-xs-4 col-sm-3">关联用户：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="userName" name="userName" v-model="data.user.name" readonly="readonly">
				</div>
				<div class="formControls col-xs-2 col-sm-2">
					<input class="btn btn-link" type="button" onclick="showMenu();" value="选择">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">设备模板：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="hidden" id="appTemplateId" v-model="data.appTemplate.id">
					<input type="hidden" id="templateTypeSn" name="templateTypeSn" v-model="data.templateTypeSn">
					<select class="input-text size-L" id="appTemplate" name="appTemplate" v-model="data.appTemplate.id">
					</select>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">滚动速度：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<span class="select-box">
						<select class="select size-L" id="switchingSpeed" name="switchingSpeed" v-model="data.switchingSpeed">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</span>
				</div>
				<h4>&nbsp&nbsp秒&nbsp/&nbsp次</h4>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">城市：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input class="input-text size-L" id="citySelect" name="city" v-model="data.city">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">在设备上开启：</label>
				<div class="formControls col-xs-3 col-sm-3">
					<label>已开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds" name="userGroupIds" multiple="multiple" size="6">
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
				<div class="formControls col-xs-1 col-sm-1" style="height: 100%;">
					<label>&nbsp;</label>
					<label class="form-label">
						<input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightAll" value=">>" />
					</label>
					<label class="form-label">
						<input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightSelected" value=">" />
					</label>
					<label class="form-label">
						<input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftSelected" value="<" />
					</label>
					<label class="form-label">
						<input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftAll" value="<<" />
					</label>
				</div>
				<div class="formControls col-xs-3 col-sm-4">
					<label>待开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds_to" multiple="multiple" size="6">
							<!-- <option th:each="device:${devices}" th:value="${device.id}" th:text="${device.deviceName}"></option> -->
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary size-L radius" type="submit" value="提交">
					<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<div th:include="fragments/widget :: userTreePanel"></div>
	<script th:include="fragments/widget :: userTreeJs" type="text/javascript">
		
	</script>
	<!-- 城市选择器 -->
	<script type="text/javascript" src="/js/app/citySelect/citySelect.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/app/citySelect/citySelect.css" />
	<script type="text/javascript">
	var id = getIdFromUrl();
	var deviceId = "";
		var app = new Vue({
			el : '#app',
			data : {
				citys : {},
				data : {},
				devType : {}
			}
		});
		/* 保存营销工具 */
 		function saveMarket(){
 			var ids = [];
 			var selectedGroups = $("#userGroupIds").find("option");
 			ids.push(id);
			for (var j = 0; j < selectedGroups.length; j++) {
				ids.push($(selectedGroups[j]).prop("value"));
			}
			$.ajax({
				type : "POST",
				url : '/manager/openMarket/saveOpenMarket',
				data : {
					ids : ids
				},
				beforeSend : function() {

				},
				complete : function() {

				},
				error : function(request) {
					layer.alert("系统出错");
				},
				success : function(data) {
					if (data.status == 0) {
						refreshUParentList();
						layer.alert(data.message, function() {
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						});
					} else {
						layer.alert(data.message);
					}
				}
			});
		} 
 		/* 获取设备营销工具 */
		function loadMarket() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "GET",
				url : '/manager/market/findAll',
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.length; i++) {
							deviceId += data[i].id + ",";
						}
						for (var i = 0; i < data.length; i++) {
							$("#userGroupIds_to").append("<option value="+data[i].id+">" + data[i].name + "</option>");
						}
						loadopenMarket();
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		/* 获取设备营销工具开启 */
		function loadopenMarket() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "GET",
				url : '/manager/openMarket/getMarket/'+id,
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.length; i++) {
							$("#userGroupIds_to").find("option[value='" + data[i].marketId + "']").appendTo($("#userGroupIds"));
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		/* 获取设备信息 */
		function get() {
			$.ajax({
				type : "GET",
				url : '/manager/device/get/' + id,
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					layer.alert("Connection error");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						app.data = data;
						//设备背景图处理
						if (data.backgroundImg != "") {
							$("#fileList").append("<img src='"+data.backgroundImg+"'  width='100' height='100'>");
						}
						showAppTemplate(data.showType);
					}
				}
			});
		}

		$(function() {
			$('#userGroupIds').multiselect({
				submitAllLeft : false,
				submitAllRight : false
			});
			get();
			loadMarket();
			$("#device-form").validate({
				rules : {
					deviceName : {
						required : true,
					},
					model : {
						required : true,
					},
					sn : {
						required : true,
					},
					userName : {
						required : true,
					},
					showType : {
						required : true,
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var data = $('#device-form').serialize();

					if ($("#operator").val() != "") {
						data += "&user.id=" + $("#operator").val();
					}
					$.ajax({
						type : "POST",
						url : '/manager/device/update',
						data : data,
						beforeSend : function() {
						},
						complete : function() {
						},
						error : function(request) {
							layer.alert("系统出错");
						},
						success : function(data) {
							if (data.status == 0) {
								saveMarket();
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});

		var showAppTemplate = function(val){
			var showType = $("#showType").val();
			if(showType == "" || showType == null){
				showType = val;
				if(typeof(val) == "undefined"){
					var obj = document.getElementById("appTemplate");
					obj.options.length = 0;
					layer.alert("请选择设备类型！");
					return false;
				}else{
					reqAjax(showType);
				}
			}else{
				reqAjax(showType);
			}
		}

		var reqAjax = function(showType,appTemplateId){
			$.ajax({
				type : "GET",
				url : '/manager/appTemplate/queryTree',
				data : {
					search_EQ_showType: showType,
				},
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					var data = result.data;
					var obj = document.getElementById("appTemplate");
					obj.options.length = 0;
					var bb = $(document).find("#appTemplate");
					var appTemplateId = $("#appTemplateId").val();
					for ( var i = 0; i < data.length; i++) {
						if(appTemplateId === data[i].id){
							bb.append("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>");
						}else{
							bb.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
						}
					}
				}
			});
		}
	</script>
</body>
</html>